import React from 'react';
import {View, Text, Platform, FlatList, TouchableOpacity} from 'react-native';
import Storage from 'react-native-simple-store';
import PropTypes from 'prop-types';
import {SearchBar} from "../../components";
import {Utils} from "../../utils";

class Header extends React.Component {

    static propTypes = {
        onPressBack: PropTypes.func,
        onSubmitEditing: PropTypes.func
    };

    constructor(props) {
        super(props);
        this.state = {
            text: ''
        };
    }

    render() {
        return (
            <View style={{
                backgroundColor: '#fff',
                height: Platform.OS === 'ios' ? 64 : 44,
                paddingTop: Platform.OS === 'ios' ? 26 : 6,
                borderBottomColor: '#e5e5e5',
                borderBottomWidth: 0.5
            }}>
                <View style={{flexDirection: 'row', paddingLeft: 15, paddingRight: 15, height: 30}}>
                    <SearchBar
                        barStyle={{flex: 1, backgroundColor: '#f0f0f0'}}
                        placeholderTextColor={"#666"}
                        onSubmitEditing={() => this.props.onSubmitEditing(this.state.text)}
                        onChangeText={(text) => this.setState({text})}
                    />
                    <View style={{
                        marginLeft: 20,
                        alignSelf: 'center',
                        alignItems: 'center',
                    }}>
                        <Text
                            style={{fontSize: 16, color: '#333', flex: 1, paddingTop: 2}}
                            onPress={this.props.onPressBack}
                        >取消</Text>
                    </View>
                </View>
            </View>
        );
    }
}

export default class ItemSearch extends React.Component {
    static navigationOptions = ({navigation}) => ({
        header: (
            <Header
                onPressBack={() => {
                    navigation.goBack();
                }}
                onSubmitEditing={(text) => {
                    if (navigation.state.params.onSubmitEditing) {
                        navigation.state.params.onSubmitEditing(text);
                    }
                }}
            />
        )
    });

    constructor(props) {
        super(props);
        this.state = {
            keywords: []
        };
        this.props.navigation.setParams({
            onSubmitEditing: (text) => {
                let keywords = [];
                Storage.get('keywords').then(result => {
                    keywords = result;
                    Storage.push('keywords', text).then(() => {
                        this.props.navigation.replace('PostSearchView', {q: text});
                    });
                });
            }
        });
    }


    render() {
        return (
            <FlatList
                style={{
                    backgroundColor: '#f8f8f8',
                    paddingTop: 20
                }}
                data={this.state.keywords}
                renderItem={({item}) => this.renderItem(item)}
                numColumns={2}
                keyExtractor={(item, index) => index.toString()}
            />
        );
    }

    UNSAFE_componentWillMount(): void {

    }

    componentDidMount() {
        let keywords = [];
        Storage.get('keywords').then(result => {
            keywords = keywords.concat(result);
            this.setState({keywords});
        });
    }

    renderItem = (item) => {
        return (
            <TouchableOpacity
                activeOpacity={1}
                style={{
                    borderBottomColor: '#e5e5e5',
                    borderBottomWidth: 0.5,
                    padding: 10,
                    flex: 1
                }}
                onPress={() => this.props.navigation.replace('PostSearchView', {q: item})}
            >
                <Text style={{
                    fontSize: 14,
                    color: '#333',
                }} numberOfLines={1}>{item}</Text>
            </TouchableOpacity>
        )
    };
}
